<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OA站内聊天</title>
    <link  rel="stylesheet" href="../../static/personal_center/emoticon/css/main.css" />
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/emoticon/css/sinaFaceAndEffec.css" />
    <script src="../../static/correspondence/js/jquery-1.9.1.js"></script>
    <link href="../../static/personal_center/font_2369197_oqktwkt71s/iconfont.css" rel="stylesheet">
    <script src="../../static/correspondence/js/md5.js"></script>
    <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            font-size: 0;
        }
        .search_input {
            width: 70%;
            height: 25px;
            margin-top: 10px;
            border-radius: 3px;
            border: #cfcfcf solid 1px;
            margin-left: 5%;
            background: url(../../static/personal_center/img/input_search.png) no-repeat 4px 5px;
            background-size: 10%;
            background-color: white;
            {#background-position: 3px;#}
            padding-left: 30px;
            outline: none;
        }
        .result-li {
            width: 90%;height: 50px;line-height: 50px;padding-left: 15px;cursor: pointer;
        }

        .result-li_group {
            width: 93.5%;height: 50px;padding-left: 15px;cursor: pointer;
        }

        .result-li img {
            width: 40px;height: 40px;display: inline-block;vertical-align: top;margin-top: 5px;
        }
        .result-li p {
            display: inline-block;vertical-align: top;width: 50%;padding-left: 7px;height: 100%;line-height: 50px;
        }
        .resultLi {
            width: 90%;height: 30px;line-height: 30px;padding-left: 15px;
        }
        .chat-li {
            width: 93%;height: 60px;line-height: 30px;padding-left: 15px;padding-top: 15px;cursor: pointer;position: relative;
        }
        .chat-li i {
             display:block;
             background:#f00;
             border-radius:50%;/*50%圆角*/
             width:12px;
             height:12px;
             top:5px;
             right:5px;
             position:absolute;
        }
        .chat-li-active {
            background-color: rgba(0, 0, 0, 0.08);
        }
        .chat-li img {
            width: 50px;height: 50px;display: inline-block;vertical-align: top;
        }
        .chat-div {
            display: inline-block;vertical-align: top;width: 60%;padding-left: 7px;height: 100%;
        }
        .chat-p-left {
            display: inline-block;vertical-align: top;width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 30px;line-height: 30px;padding-left: 1%;
        }
        .chat-p-right {
            display: inline-block;vertical-align: top;width: 45%;text-align: right;font-size: 12px;color: #C0C0C0;
        }
        .chat-div-but {
            width: 130px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #C0C0C0;
        }
        .chat-div-but img {
            width: 20px;height: 20px;
        }
        .chat-bubble {
            position: relative;width: fit-content;line-height: 35px;background-color: #F8F8FF;border-radius: 3px;color: #0f1317;font-size: 14px;padding-left: 10px;float: left;margin-left: 10px;padding-right: 10px;max-width: 350px;
        }

        .chat-bubble:before {
            content: '';position:absolute;top: 10px;left: -4px;width: 8px;height: 8px;transform: rotate(45deg);background-color: #F8F8FF;
        }

        .comment {
            position: relative;width: fit-content;line-height: 35px;background: #32CD32;border-radius: 3px;color: #0f1317;font-size: 14px;padding-left: 10px;float: right;margin-right: 10px;padding-right: 10px;max-width: 350px;
        }

        .comment:after {
            content: '';position:absolute;top: 10px;right: -4px;width: 8px;height: 8px;transform: rotate(45deg);background-color: #32CD32;
        }
        ::-webkit-scrollbar{
            width: 5px;height: 40px;background-color: rgba(0, 0, 0, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            width: 5px;height: 40px;background: #C0C0C0;color: #C0C0C0;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;
        }

        .img-p img{display:inline-block;vertical-align: top;margin-top: 5px;}

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }

        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }
        #PersonnelList li:hover {
            background: #cfcfcf;
        }
        #close {
            {#display: block;#}
            right: -5px;top: -5px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="creat_group_name" class="shade" style="z-index: 110000;">
        <div id="group-model" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 300px;height: 150px;background: #F5F5F5;z-index: 110100;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="group-title" style="width: 100%;height: 30px;border-bottom: #cfcfcf solid 1px;cursor: move;">
                    <div style="float: left;font-size: 10px;margin-left: 5px;height: 30px;line-height: 30px;">群名称</div>
                    <div onclick="close_creat_group()" style="float: right;font-size: 10px;margin-right: 5px;height: 30px;line-height: 30px;cursor: pointer;">x</div>
                </div>
                <div style="width: 100%;height: 88px;border-bottom: #cfcfcf solid 1px;font-size: 14px;line-height: 88px;">
                    <label style="margin-left: 10px;" for="">群组名称：</label>
                    <input type="text" id="group_name" style="width: 200px;height: 25px;border-radius: 3px;border: #cfcfcf solid 1px;outline: none;">
                </div>
                <div style="width: 100%;height: 30px;line-height: 50px;font-size: 14px;padding-right: 5px;">
                    <button onclick="save_group()" style="width: 70px;height: 25px;border-radius: 3px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;float: right;margin-top: 2.5px;margin-right: 15px;cursor: pointer;">确认</button>
                </div>
            </div>
        </div>
    </div>

    <div id="OutermostLayer" class="shade">
        <div id="SecondLayer" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 700px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="title" style="cursor: move;width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                    <div style="float: left;width: 68%;;height: 100%;line-height: 40px;text-align: left;padding-left: 1%;font-size: 14px;">选择聊天人员</div>
                    <div style="float: right;width: 28%;;height: 100%;line-height: 40px;text-align: right;padding-right: 2%;font-size: 14px;">
                        <img src="../../static/personal_center/img/去除.png" alt="" style="width: 18px;height: 18px;margin-top: 11px;cursor: pointer;" onclick="close_personnel()">
                    </div>
                </div>
                <div style="height: 92%;width: 100%;">
                    <div style="width: 40%;height: 100%;display: inline-block;vertical-align: top;border-right: #cfcfcf solid 1px;font-size: 14px;">
                        <div style="width: 100%;height: 60px;text-align: center;">
                            <input id="SearchChatPeople" onchange="DetermineEmpty()" class="search_input" type="text" placeholder="搜索" onkeydown="SearchResult()" style="margin-top: 17.5px;" autocomplete="off">
                        </div>
                        <ul id="PersonnelList" style="width: 100%;height: 85%;overflow: auto;">
                            {% for key,value in friend_list.items %}
                                <li class="resultLi">{{ key }}</li>
                                {% for foo in value %}
                                    <li class="result-li">
                                        <input id="select-{{ foo.job_number }}" onclick="clearRadio(this)" class="chat_personnel" value="{{ foo.job_number }}" type="checkbox">
                                        <img id="img-{{ foo.job_number }}" style="margin-left: 5px;" src="{{ foo.picture }}">
                                        <p id="name-{{ foo.job_number }}">{{ foo.name }}</p>
                                    </li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                        <ul id="SearchDataList" style="width: 100%;display: none;height: 85%;overflow: auto;">
                        </ul>
                    </div>
                    <div style="width: 59%;height: 100%;display: inline-block;vertical-align: top;">
                        <div id="SelectedChatPerson" style="width: 100%;height: 90%;">
                            <div style="width: 100%;height: 40px;padding-left: 3%;text-align: left;font-size: 14px;line-height: 40px;">
                                选择联系人
                            </div>
                            <div id="selected-div" style="width: 100%;font-size: 14px;height: 86%;overflow: auto;">

                            </div>
                        </div>
                        <div style="width: 100%;text-align: center;height: 40px;">
                            <button onclick="CreatGroupName()" style="width: 100px;height: 30px;line-height: 25px;text-align: center;letter-spacing: 5px;border-radius: 3px;border: #cfcfcf solid 1px;font-size: 14px;cursor: pointer;">完成</button>
                            <button onclick="close_personnel()" style="margin-left: 15px;width: 100px;height: 30px;line-height: 25px;text-align: center;color: #0abb78;letter-spacing: 5px;border-radius: 3px;font-size: 14px;border: #cfcfcf solid 1px;cursor: pointer;">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%;height: 100%;padding: 0;margin: 0;">
        <div style="display: inline-block;vertical-align: top;width: 7%;background: #1c2838;height: 100%;">
            <div style="width: 100%;height: 70px;line-height: 70px;text-align: center;cursor: pointer;background: #1c2838;">
                <img src="{{ head_portrait }}" alt="" style="width: 50px;height: 50px;margin-top: 10px;">
            </div>
            <div onclick="change_type('liaotian')" style="width: 100%;height: 50px;line-height: 50px;text-align: center;cursor: pointer;">
                <i id="liaotian" class="iconfont icon-liaotianduihua" style="font-size: 26px;color: #0d8ddb;"></i>
            </div>

            <div onclick="change_type('tongxun')" style="width: 100%;height: 50px;line-height: 50px;text-align: center;cursor: pointer;">
                <i id="tongxun" class="iconfont icon-gerenzhongxin-wodexinxi" style="color: #dfdfdf;font-size: 24px;"></i>
            </div>

            <div onclick="change_type('qunzu')" style="width: 100%;height: 50px;line-height: 50px;text-align: center;cursor: pointer;bottom: 20px;">
                <i id="qunzu" class="iconfont icon-xietonggongzuozhongxin" style="color: #dfdfdf;font-size: 26px;"></i>
            </div>
        </div>

        <div style="display: inline-block;vertical-align: top;width: 28%;height: 100%;border-right: #cfcfcf solid 1px;">
            <div id="search-div" style="width: 100%;height: 10%;background: #F8F8FF;">
                <input id="dataSearch" class="search_input" type="text" placeholder="搜索" onfocus="change_type('sousuo_tag')" onkeydown="keydown()" autocomplete="off">
            </div>

            <div id="liaotian_tag" style="width: 100%;height: 90%;display: inline-block;font-size: 14px;overflow: auto;">
                <div style="width: 100%;height: 100%;overflow: auto;">
                    <ul id="chat-ul" style="width: 100%;">

                    </ul>
                </div>
            </div>

            <div id="tongxun_tag" style="width: 100%;height: 90%;display: none;font-size: 14px;">
                <div style="width: 100%;height: 100%;overflow: auto;">
                    <ul id="chat-box" style="width: 100%;">
                        {% for key,value in friend_list.items %}
                            <li class="resultLi">{{ key }}</li>
                            {% for foo in value %}
                                <li ondblclick="choose_chat_people('{{ foo.picture }}', '{{ foo.name }}', '{{ foo.job_number }}')" class="result-li">
                                    <img src="{{ foo.picture }}">
                                    <p>{{ foo.name }}</p>
                                </li>
                            {% endfor %}
                            <hr style="background-color: #cfcfcf; height:1px; border:none;">
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div id="sousuo_tag" style="width: 100%;height: 90%;display: none;font-size: 14px;overflow: auto;">
                <ul id="search-result">

                </ul>
            </div>

            <div id="qunzu_tag" style="width: 100%;height: 90%;display: none;font-size: 14px;overflow: auto;">
                <div style="width: 100%;height: 50px;line-height: 50px;text-align: center;background: #cfcfcf;">
                    <p style="font-size: 16px;cursor: pointer;color: #00a0e9;" onclick="line_div()">添加群组</p>
                </div>

                <ul id="qunzu-result">
                    {% for group in group_obj %}
                        <li ondblclick="choose_chat_people('', '{{ group.group_name }}', '{{ group.roomName }}')" class="result-li">
                            <img src="">
                            <p>{{ group.group_name }}</p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div style="display: inline-block;vertical-align: top;width: 63%;height: 100%;">
            <div id="wenti-body-div" style="width: 102%;height: 68%;border-bottom: #cfcfcf solid 1px;">
                <div style="width: 100%;height: 55px;border-bottom: #dfdfdf solid 1px;line-height: 55px;font-size: 18px;">
                    <div id="chat-object" style="margin-left: 10px;"></div>
				</div>
                <div id="info-show" style="overflow: auto;height: 85%;">
					<ul id="info-show-ul"></ul>
				</div>
            </div>

            <div style="width: 100%;height: 22%;">
                <div style="width: 100%;height: 25%;font-size: 14px;padding-left: 10px;padding-top: 5px;">                  {# 表情 #}
                    <div class="operator-box-btn"><span class="face-icon"  ><img id="btn" src="../../static/personal_center/img/表情.png" style="width: 25px;height: 25px;cursor: pointer;" alt=""></span></div>
                </div>
                <div style="width: 100%;height: 75%;overflow: auto;outline: none;padding-left: 15px;">            {# 聊天输入框 #}
                    <textarea class="text" name="" id="detail-reply-content" style="outline: none;border: none;font-size: 18px;width: 98%;height: 95%;" onkeydown="send_chat()"></textarea>
                </div>
            </div>

            <div style="width: 100%;height: 9%;text-align: right;">
                <button id="chat-message-submit" style="width: 100px;height: 30px;border-radius: 3px;border: none;background: #00a0e9;color: white;text-align: center;margin-top: 10px;margin-right: 5px;">发送(S)</button>
            </div>
        </div>
    </div>
    <div id="room-name" style="display: none;">{{ room_name }}</div>
</body>
<script type="text/javascript" src="../../static/personal_center/emoji_jQuery/dist/emoji_jQuery.min.js"></script>
<script type="text/javascript" src="../../static/personal_center/emoticon/js/main.js"></script>
<script type="text/javascript">
    $.Lemoji({
        emojiInput: '#detail-reply-content',
        emojiBtn: '#btn',
        length: 8,
        emojis: {
            qq: {path: '../../static/personal_center/emoji_jQuery/static/images/qq/', code: ':', name: '表情1'},
            tieba: {path: '../../static/personal_center/emoji_jQuery/static/images/tieba', code: ';', name: "表情2"},
            emoji: {path: '../../static/personal_center/emoji_jQuery/static/images/emoji', code: ',', name: '表情3'}
        }
    });
    var friend_list = {{ friend_list | safe }};
    var from_people = "{{ from_people | safe }}";                                                           // 当前用户的聊天ID
    const roomName = document.getElementById('room-name').innerText;                                        // 聊天对象ID
    var head_portrait = "{{ head_portrait | safe }}";                                                       // 当前用户头像
    var chat_list = document.getElementById("chat-ul");
    var present_user = "{{ real_name | safe }}";
    var chat_people_list = {{ chat_people_list | safe }};

    query_records(roomName, "");

    function clearRadio(obj) {
        var this_number = obj.value;
        if (obj.checked) {
            var img_path = document.getElementById('img-'+this_number).src;
            var this_name = document.getElementById('name-'+this_number).innerText;
            var html_str = `
                <div id="selected-`+this_number+`" class="SelectedPersonnel" style="width: 50px;height: 85px;display: inline-block;vertical-align: top;margin-left: 10px;text-align: center;position: relative;">
                    <div id="close" onclick="remove_selected('`+this_number+`')" style="width: 15px;height: 15px;background: #cfcfcf;border-radius: 50%;line-height: 14px;cursor: pointer;">
                        <i class="iconfont icon-quchu" style="font-size: 12px;color: white;"></i>
                    </div>
                    <img src="`+img_path+`" alt="" style="width: 50px;height: 50px;">
                    <p style="height: 15px;">`+this_name+`</p>
                </div>
            `
            $('#selected-div').append(html_str)
        }else {
            document.getElementById('selected-'+this_number).remove();
        }
    }
    
    function remove_selected(obj_id) {
        document.getElementById('selected-'+obj_id).remove();
        document.getElementById('select-'+obj_id).checked = false;
    }

    function SearchResult() {
        var search_value = document.getElementById('SearchChatPeople').value;
        if (search_value) {
            document.getElementById("SearchDataList").style.display='inline-block';
            document.getElementById("PersonnelList").style.display='none';
            var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容
            if (event.keyCode === 13) {
                var search_result = document.getElementById("SearchDataList");search_result.innerHTML = "";
                for (var i in friend_list){
                    for (var t=0; t<friend_list[i].length; t++) {
                        if (friend_list[i][t]['name'].indexOf(search_value) !== -1){
                            var HtmlStr = `
                                <li class="result-li">
                                    <input id="select-`+friend_list[i][t]['job_number']+`" onclick="clearRadio(this)" class="chat_personnel" value="`+friend_list[i][t]['job_number']+`" type="checkbox">
                                    <img id="img-`+friend_list[i][t]['job_number']+`" style="margin-left: 5px;" src="`+friend_list[i][t]['picture']+`">
                                    <p id="name-`+friend_list[i][t]['job_number']+`">`+friend_list[i][t]['name']+`</p>
                                </li>
                            `
                            $("#SearchDataList").append(HtmlStr);
                        }
                    }
                }
            }
        }
    }

    function DetermineEmpty() {
        var search_value = document.getElementById('SearchChatPeople').value;
        if (!search_value) {
            document.getElementById("PersonnelList").style.display='inline-block';
            document.getElementById("SearchDataList").style.display='none';
        }
    }
    console.log("================", chat_people_list)
    for (var chat=0; chat<chat_people_list.length; chat++) {
        if (chat === 0) {
            var li_tag = '<li id="'+chat_people_list[chat]["job_number"]+'" onclick="choose_chat(this, \''+chat_people_list[chat]["real_name"]+'\', \''+chat_people_list[chat]["job_number"]+'\')" class="chat-li chat-li-active">' +
                '<img src="'+chat_people_list[chat]["head_sculpture"]+'"> <div class="chat-div"> <div><p class="chat-p-left">'+chat_people_list[chat]["real_name"]+'</p>' +
                '<p class="chat-p-right">'+chat_people_list[chat]["chat_time"]+'</p></div><div class="chat-div-but '+chat_people_list[chat]["job_number"]+'">'+chat_people_list[chat]["message"]+'</div></div></li>'
            document.getElementById("chat-object").innerText=chat_people_list[chat]["real_name"];
        }else {
            li_tag = '<li id="'+chat_people_list[chat]["job_number"]+'" onclick="choose_chat(this, \''+chat_people_list[chat]["real_name"]+'\', \''+chat_people_list[chat]["job_number"]+'\')" class="chat-li">' +
                '<img src="'+chat_people_list[chat]["head_sculpture"]+'"> <div class="chat-div"> <div><p class="chat-p-left">'+chat_people_list[chat]["real_name"]+'</p>' +
                '<p class="chat-p-right">'+chat_people_list[chat]["chat_time"]+'</p></div><div class="chat-div-but '+chat_people_list[chat]["job_number"]+'">'+chat_people_list[chat]["message"]+'</div></div></li>'
        }
        $("#chat-ul").append(li_tag);
    }

    // 聊天内容滑到最低端
    function scrollConversationScreen() {
        $('#info-show').scrollTop($('#info-show')[0].scrollHeight);
    }

    function CreatGroupName() {
        document.getElementById("creat_group_name").style.display = "table-row";
    }

    function close_creat_group() {
        document.getElementById("creat_group_name").style.display = "none";
    }

    function save_group() {
        var group_name = document.getElementById('group_name').value;
        var SelectedPersonnel_list = document.getElementsByClassName('SelectedPersonnel');
        var choose_list = [];
        for (var i=0; i<SelectedPersonnel_list.length; i++) {
            choose_list.push(SelectedPersonnel_list[i].id.split('-')[1]);
        }
        var xhr = new XMLHttpRequest();
        var form = new FormData();
        form.append("group_name", group_name)
        form.append("choose_list", JSON.stringify(choose_list))
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/correspondence/create_group", true);
        xhr.send(form);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var JsonDate = JSON.parse(xhr.responseText);
                    if (JsonDate['code'] === 200) {
                        alert("创建成功！")
                        close_creat_group();
                        close_personnel();
                    }
                }
            }
        };
    }
    console.log("=================================", 'wss://' + window.location.host)
    var chatSocket = new WebSocket('wss://' + window.location.host + '/ws/correspondence/'+ roomName + '/?token={{ token }}');

    chatSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        console.log("data: ", data)

        if (data.chat_type === 'private') {
            document.getElementById("room-name").innerText = data.from;
            if (!document.getElementById(data.from)){
                if (document.getElementsByClassName("chat-li chat-li-active").length) {
                    var first_id = document.getElementsByClassName("chat-li chat-li-active")[0].id;
                    if (first_id !== data.from) {
                        new_tag = '<li id="'+data.from+'" onclick="choose_chat(this, \''+data.form_name+'\', \''+data.from+'\')" class="chat-li"> <img src="'+data.form_people_img+'"> <div class="chat-div"> <div><p class="chat-p-left">'+data.form_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.from+'">'+data.message+'</div></div></li>'
                        $("#"+first_id).after(new_tag);
                        return false
                    }
                }else {
                    var new_tag = '<li id="'+data.from+'" onclick="choose_chat(this, \''+data.form_name+'\', \''+data.from+'\')" class="chat-li chat-li-active"> <img src="'+data.form_people_img+'"> <div class="chat-div"> <div><p class="chat-p-left">'+data.form_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.from+'">'+data.message+'</div></div></li>'
                    document.getElementById("chat-ul").insertAdjacentHTML('afterbegin', new_tag);
                    document.getElementById("chat-object").innerText=data.form_name;
                }
            }else {
                if (data.form_name !== document.getElementById('chat-object').innerText) {
                    document.getElementById("chat-ul").removeChild(document.getElementById(data.from));
                    first_id = document.getElementsByClassName("chat-li chat-li-active")[0].id;
                    if (first_id !== data.from) {
                        new_tag = '<li id="'+data.from+'" onclick="choose_chat(this, \''+data.form_name+'\', \''+data.from+'\')" class="chat-li"> <img src="'+data.form_people_img+'"> <div class="chat-div"> <div><p class="chat-p-left">'+data.form_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.from+'">'+data.message+'</div></div></li>'
                        $("#"+first_id).after(new_tag);
                        return false
                    }
                }

            }
            if (String(from_people) === String(data.message.from)){
                return false
            }else {
                var data_dict = {"message": data.message, "form_people_img": data.form_people_img}
                $('#info-show ul').append(reply1(data_dict));
            }
            {#div_tag.scrollTop = div_tag.scrollHeight;#}
        }else {
            document.getElementById("room-name").innerText = data.to_user;
            if (!document.getElementById(data.to_user)){
                if (document.getElementsByClassName("chat-li chat-li-active").length) {
                    first_id = document.getElementsByClassName("chat-li chat-li-active")[0].id;
                    if (first_id !== data.to_user) {
                        new_tag = '<li id="'+data.to_user+'" onclick="choose_chat(this, \''+data.real_name+'\', \''+data.to_user+'\')" class="chat-li"> <img src=""> <div class="chat-div"> <div><p class="chat-p-left">'+data.real_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.to_user+'">'+data.message+'</div></div></li>'
                        $("#"+first_id).after(new_tag);
                        return false
                    }
                }else {
                    new_tag = '<li id="'+data.to_user+'" onclick="choose_chat(this, \''+data.real_name+'\', \''+data.to_user+'\')" class="chat-li chat-li-active"> <img src=""> <div class="chat-div"> <div><p class="chat-p-left">'+data.real_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.to_user+'">'+data.message+'</div></div></li>'
                    document.getElementById("chat-ul").insertAdjacentHTML('afterbegin', new_tag);
                    document.getElementById("chat-object").innerText=data.form_name;
                }
            }else {
                if (data.real_name !== document.getElementById('chat-object').innerText) {
                    document.getElementById("chat-ul").removeChild(document.getElementById(data.to_user));
                    first_id = document.getElementsByClassName("chat-li chat-li-active")[0].id;
                    if (first_id !== data.to_user) {
                        new_tag = '<li id="'+data.to_user+'" onclick="choose_chat(this, \''+data.real_name+'\', \''+data.to_user+'\')" class="chat-li"> <img src=""> <div class="chat-div"> <div><p class="chat-p-left">'+data.real_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+data.to_user+'">'+data.message+'</div></div></li>'
                        $("#"+first_id).after(new_tag);
                        return false
                    }
                }
            }
            data_dict = {"message": data.message, "form_people_img": data.form_people_img}
            $('#info-show ul').append(reply1(data_dict));
        }
        scrollConversationScreen();
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly', e);
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        if (document.getElementById('room-name').innerText.length > 5) {
            var chat_type = 'group'
        }else {
            chat_type = 'private'
        }
        var content = $('.text').val();
        if (!content.trim()){
            return false
        }
        content = $.emojiParse({
            content: content,
            emojis: [
                {type: 'qq', path: '../../static/personal_center/emoji_jQuery/static/images/qq/', code: ':'},
                {path: '../../static/personal_center/emoji_jQuery/static/images/tieba/', code: ';', type: 'tieba'},
                {path: '../../static/personal_center/emoji_jQuery/static/images/emoji/', code: ',', type: 'emoji'}]
        });

        chatSocket.send(JSON.stringify({
            'form_name': '{{ real_name }}',
            'form_people_img': '{{ head_portrait }}',
            'message': content,
            'real_name': document.getElementById('chat-object').innerText,
            'from': from_people,
            'to_user': document.getElementById('room-name').innerText,
            'chat_type': chat_type
         }));
        var data_dict = {"message": content, "form_people_img": head_portrait}
        $('#info-show ul').append(reply(data_dict));
        var active_class = "chat-div-but " + String(document.getElementsByClassName("chat-li chat-li-active")[0].id)
        document.getElementsByClassName(active_class)[0].innerHTML = content;
        document.getElementById("detail-reply-content").value = "";
        document.getElementById('detail-reply-content').select();
        scrollConversationScreen();
    };

    document.getElementById('detail-reply-content').select()

    function reply(content_data){
        var html;
        html  = '<li style="line-height: 100px;">';
        html += '<img src="'+content_data['form_people_img']+'" style="width: 35px;height: 35px;float: right;margin-right: 15px;">';
        html += '<div class="comment">';
        html += '<p class="img-p">'+content_data['message']+'</p>';
        html += '</div>';
        html += '</li>';
        return html;
    }

    function reply1(content_data){
        var html;
        html  = '<li style="line-height: 100px;">';
        html += '<img src="'+content_data['form_people_img']+'" style="width: 35px;height: 35px;float: left;margin-left: 15px;">';
        html += '<div class="chat-bubble">';
        html += '<p class="img-p">'+content_data['message']+'</p>';
        html += '</div>';
        html += '</li>';
        return html;
    }

    function change_type(ele_id) {
        if (ele_id === "liaotian") {
            document.getElementById("liaotian").style.color="#0d8ddb";
            document.getElementById("tongxun").style.color="#dfdfdf";
            document.getElementById("qunzu").style.color="#dfdfdf";
            document.getElementById("liaotian_tag").style.display="inline-block";
            document.getElementById("tongxun_tag").style.display="none";
            document.getElementById("sousuo_tag").style.display="none";
            document.getElementById("qunzu_tag").style.display="none";
        }else if (ele_id === "sousuo_tag"){
            document.getElementById("sousuo_tag").style.display="inline-block";
            document.getElementById("liaotian_tag").style.display="none";
            document.getElementById("tongxun_tag").style.display="none";
            document.getElementById("qunzu_tag").style.display="none";
        }else if (ele_id === "tongxun"){
            document.getElementById("tongxun").style.color="#0d8ddb";
            document.getElementById("liaotian").style.color="#dfdfdf";
            document.getElementById("qunzu").style.color="#dfdfdf";
            document.getElementById("tongxun_tag").style.display="inline-block";
            document.getElementById("liaotian_tag").style.display="none";
            document.getElementById("sousuo_tag").style.display="none";
            document.getElementById("qunzu_tag").style.display="none";
            document.getElementById("search-div").style.display="inline-block";
        }else {
            document.getElementById("qunzu").style.color="#0d8ddb";
            document.getElementById("liaotian").style.color="#dfdfdf";
            document.getElementById("tongxun").style.color="#dfdfdf";
            document.getElementById("qunzu_tag").style.display="inline-block";
            document.getElementById("liaotian_tag").style.display="none";
            document.getElementById("sousuo_tag").style.display="none";
            document.getElementById("tongxun_tag").style.display="none";
            document.getElementById("search-div").style.display="none";
        }
    }

    function inlone_tongxunlu() {
        document.getElementById("tongxun_tag").style.display="inline-block";
            document.getElementById("liaotian_tag").style.display="none";
            document.getElementById("sousuo_tag").style.display="none";
            document.getElementById("qunzu_tag").style.display="none";
    }

    function keydown() {
        var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容
        if (event.keyCode === 13) {
            var search_result = document.getElementById("search-result");search_result.innerHTML = "";
            var search_key = document.getElementById("dataSearch").value;
            for (var i in friend_list){
                for (var t=0; t<friend_list[i].length; t++) {
                    if (friend_list[i][t]['name'].indexOf(search_key) !== -1){
                        var li_tag = document.createElement("li");li_tag.className='result-li';li_tag.setAttribute("ondblclick", "choose_chat_people('"+friend_list[i][t]['picture']+"', '"+friend_list[i][t]['name']+"', '"+friend_list[i][t]['job_number']+"')")
                        var img_tag = document.createElement("img");var p_tag = document.createElement("p");
                        img_tag.src=friend_list[i][t]['picture'];p_tag.innerText=friend_list[i][t]['name'];
                        li_tag.appendChild(img_tag);li_tag.appendChild(p_tag);search_result.appendChild(li_tag);
                    }
                }
            }
        }
    }

    function send_chat() {
        var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容
        if (event.keyCode === 13) {
            document.querySelector('#chat-message-submit').click();
            document.getElementById('detail-reply-content').select()
        }
    }

    function choose_chat(eve, people_name, job_number) {
        document.getElementById('room-name').innerText = job_number;
        var li_tag_list = document.getElementById("chat-ul").childNodes;
        for (var i=0; i<li_tag_list.length; i++) {
            li_tag_list[i].className="chat-li";
        }
        eve.className="chat-li chat-li-active"
        document.getElementById("chat-object").innerText=people_name;
        query_records(job_number, "")
    }

    function query_records(job_number, room_id="") {
        var xhr = new XMLHttpRequest();
        var form = new FormData();
        if (room_id){
            form.append("room_id", room_id)
        }else {
            form.append("from_people", from_people)
            form.append("roomName", job_number)
        }
        xhr.open('post', "/correspondence/query_records", true);
        xhr.send(form);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var JsonDate = JSON.parse(xhr.responseText);
                    document.getElementById("info-show-ul").innerHTML="";
                    var chat_msg = ""
                    for (var JJ=0; JJ<JsonDate["data"].length; JJ++){
                        chat_msg = JsonDate["data"][JJ][0]['message'];
                        if (JsonDate["data"][JJ][0]['from'] === from_people){
                            $('#info-show ul').append(reply(JsonDate["data"][JJ][0]));           // 发送者
                        }else {
                            $('#info-show ul').append(reply1(JsonDate["data"][JJ][0]));     // 接收者
                        }
                    }
                    if (document.getElementsByClassName("chat-div-but "+ job_number).length) {
                        document.getElementsByClassName("chat-div-but "+ job_number)[0].innerHTML = chat_msg;
                    };
                    scrollConversationScreen();
                }
            }
        };
    }

    function choose_chat_people(picture_path, people_name, job_number) {
        const chatSocket = new WebSocket('wss://' + window.location.host + '/ws/correspondence/'+ job_number + '/?token={{ token }}');
        document.getElementById('room-name').innerText = job_number;
        document.getElementById("liaotian").style.color="#0d8ddb";
        document.getElementById("tongxun").style.color="#dfdfdf";
        document.getElementById("liaotian_tag").style.display="inline-block";
        document.getElementById("tongxun_tag").style.display="none";
        document.getElementById("sousuo_tag").style.display="none";
        document.getElementById("qunzu_tag").style.display="none";
        document.getElementById("dataSearch").value="";
        document.getElementById("room-name").innerText = job_number
        var li_tag_list = document.getElementById("chat-ul").childNodes;
        for (var t=0; t<li_tag_list.length; t++) {
            li_tag_list[t].className="chat-li";
        }
        var chat_p_left_list = document.getElementsByClassName("chat-p-left")
        var arr_list = [parseInt(job_number), parseInt(roomName)]
        arr_list.sort((x,y)=> x - y)
        var sms =  hex_md5(String(arr_list[0]) + String(arr_list[1]));
        var new_tag = '<li id="'+job_number+'" onclick="choose_chat(this, \''+people_name+'\', \''+job_number+'\')" id="'+sms+'" class="chat-li chat-li-active"> <img src="'+picture_path+'"> <div class="chat-div"> <div><p class="chat-p-left">'+people_name+'</p><p class="chat-p-right">今天</p></div><div class="chat-div-but '+job_number+'">京山市人民医院常用电话号码</div></div></li>'
        for (var i=0; i<chat_p_left_list.length; i++) {
            if (chat_p_left_list[i].textContent === people_name){
                document.getElementById("chat-ul").removeChild(document.getElementById(job_number));
            }
            document.getElementById("info-show-ul").innerHTML="";
         }

        document.getElementById("chat-ul").insertAdjacentHTML('afterbegin', new_tag);
        document.getElementById("chat-object").innerText=people_name;
        query_records(job_number, "");
    }

    function line_div() {
        document.getElementById("OutermostLayer").style.display = "table-row";
    }

    let title = document.querySelector("#title");
    let addForm = document.querySelector("#SecondLayer");

    title.addEventListener("mousedown", function (e) {
        let x = e.pageX - addForm.offsetLeft;
        let y = e.pageY - addForm.offsetTop;

        document.addEventListener("mousemove", move);
        function move(e) {
            addForm.style.left = e.pageX - x + 'px';
            addForm.style.top = e.pageY - y + 'px';
        }

        document.addEventListener("mouseup", function (e) {
            document.removeEventListener("mousemove", move);
        })
    });

    let group_title = document.querySelector("#group-title");
    let group_model = document.querySelector("#group-model");

    group_title.addEventListener("mousedown", function (e) {
        let x = e.pageX - group_model.offsetLeft;
        let y = e.pageY - group_model.offsetTop;

        document.addEventListener("mousemove", move);
        function move(e) {
            group_model.style.left = e.pageX - x + 'px';
            group_model.style.top = e.pageY - y + 'px';
        }

        document.addEventListener("mouseup", function (e) {
            document.removeEventListener("mousemove", move);
        })
    });

    function close_personnel() {
        document.getElementById('OutermostLayer').style.display='none';
        var chat_personnel_list = document.getElementsByClassName('chat_personnel');
        for (var i=0; i<chat_personnel_list.length; i++) {
            chat_personnel_list[i].checked = false;
        }
        document.getElementById('selected-div').innerHTML = '';
    }
</script>

</html>